<template>
  <div>
    <div class="div-content" style="">
      <div class="div-item" style="heigt: 100%">
        <div class="div-item-left">实际提现现金总额：</div>
        <div class="div-item-right">{{all}}</div>
      </div>
    </div>
    <Form ref="searchForm" @keydown.enter.native="Search" :model="searchForm" inline :label-width="60" class="search-form">
      <Form-item label="时间" prop="selectDate">
        <DatePicker v-model="searchForm.selectDate" type="date" format="yyyy-MM" clearable placeholder="选择时间" style="width: 200px">
        </DatePicker>
      </Form-item>
      <Form-item label="会员手机号" prop="mobile" :label-width="100">
        <Input type="text" v-model="searchForm.mobile" placeholder="请输入会员手机号" clearable style="width: 160px" />
      </Form-item>
      <Form-item label="区域" prop="region">
        <region ref="region" style="width: 350px" @selected="selectedRegionSearch" />
      </Form-item>
      <Form-item label="用户类型" prop="partnerName">
        <Select v-model="searchForm.partnerName" placeholder="请选择用户类型" clearable style="width: 160px">
          <Option value="区域">区域</Option>
          <Option value="平台">平台</Option>
        </Select>
      </Form-item>
      <Form-item label="审核状态" prop="applyStatus">
        <Select v-model="searchForm.applyStatus" placeholder="全部状态" clearable style="width: 160px">
          <Option value="APPLY">未审核</Option>
          <Option value="INPAYMENT">打款中</Option>
          <Option value="VIA_AUDITING">已通过未到账</Option>
          <Option value="FINISH">已到账完成</Option>
          <Option value="FAIL_AUDITING">已驳回</Option>
			<Option value="CLOSE_FINISH">注销结算完成</Option>
        </Select>
      </Form-item>
      <Button @click="Search" type="primary" icon="ios-search" class="search-btn">搜索</Button>
      <Button @click="handleReset" type="primary" class="search-btn">重置</Button>
    </Form>
    <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"></Table>
    <Row type="flex" justify="end">
      <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
    </Row>
    <Modal title="提现审核" v-model="roleModalVisible" :mask-closable="false" :width="500">
      <Form :label-width="80">
        <FormItem label="申请编号">
          <span>{{showList.sn}}</span>
        </FormItem>
        <FormItem label="用户名称">
          <span>{{showList.memberName}}</span>
        </FormItem>
        <FormItem label="申请金额">
          <span>{{showList.applyMoney | unitPrice}}</span>
        </FormItem>
        <FormItem label="提现状态">
          <span>未审核</span>
        </FormItem>
        <FormItem label="申请时间">
          <span>{{showList.createTime}}</span>
        </FormItem>
        <FormItem label="审核备注">
          <Input v-model="audit" />
        </FormItem>
      </Form>
      <div slot="footer" v-if="showList.applyStatus == 'APPLY'">
        <Button type="text" @click="submitRole('FAIL_AUDITING')">拒绝</Button>
        <Button type="primary" :loading="submitLoading" @click="submitRole('VIA_AUDITING')">通过
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  PlantWithdrawalAdmin,
  PlantWithdrawalDakuan
} from "@/api/financial.js"
import {
  withdrawApply
} from "@/api/member"
import region from "@/views/lili-components/region-every"
export default {
  data () {
    return {
      all: 0,
      loading: false,
      total: 0,
      submitLoading: false,
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        selectDate: '',
        mobile: '',
        partnerName: '',
        applyStatus: '',
      },
      columns: [{
        title: '序号',
        type: "index",
        width: '80',
        align: 'center'
      }, {
        title: "提现发起时间",
        key: "createTime",
        minWidth: 200,
        tooltip: true,
      }, {
        title: "流水号",
        key: "sn",
        minWidth: 240,
        tooltip: true,
      }, {
        title: "手机号",
        key: "mobile",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "用户昵称",
        key: "memberName",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "区域",
        key: "region",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "身份类型",
        key: "partnerName",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "用户类型",
        key: "gradeName",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "提现类型",
        key: "realName",
        minWidth: 200,
        render: (h, params) => {
          let arr = []
          if (params.row.owner == 'BUYER_PROMOTE_FW' || params.row.owner == 'PROMOTE_FW') {
            arr.push(h(
              "div", {
              props: {
                type: "success",
                size: "small",
              },
              style: {},
            },
              "服务费"
            ))
          }
          if (params.row.owner == 'BUYER_PROMOTE_HY' || params.row.owner == 'PROMOTE_HY') {
            arr.push(h(
              "div", {
              props: {
                type: "warning",
                size: "small",
              },
              style: {},
            },
              "会员费"
            ))
          }
          return h("div", arr)
        },
      },
      {
        title: "扣率",
        key: "fee",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "提现焕贝额",
        key: "applyPrice",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "提现现金额",
        key: "applyMoney",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "预扣预缴税额",
        key: "withholdingAdvance",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "实际提现现金额",
        key: "realMoney",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "审核通过时间",
        key: "inspectTime",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "收款账户",
        key: "cardNo",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "账户名",
        key: "accountName",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "银行",
        key: "bankName",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "开户行",
        minWidth: 200,
        tooltip: true,
        render: (h, params) => {
          return h('div', [
            h('Span', params.row.adCodeName + params.row.openAccBank, '')
          ])
        }
      },
      {
        title: "银行行号",
        key: "bankCode",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "电话",
        key: "bankMobile",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "状态",
        minWidth: 200,
        tooltip: true,
        render: (h, params) => {
          if (params.row.applyStatus === 'APPLY') {
            return h('div', [
              h('Span', {}, '未审核')
            ])
          } else if (params.row.applyStatus === 'VIA_AUDITING') {
            return h('div', [
              h('Span', {}, '已通过未到账 ')
            ])
          } else if (params.row.applyStatus === 'FINISH') {
            return h('div', [
              h('Span', {}, '已到账完成 ')
            ])
          } else if (params.row.applyStatus === 'FAIL_AUDITING') {
            return h('div', [
              h('Span', {}, '已驳回 ')
            ])
          } else if (params.row.applyStatus === 'CANCEL') {
            return h('div', [
              h('Span', {}, '取消')
            ])
          } else if (params.row.applyStatus === 'CLOSE_FINISH') {
            return h('div', [
              h('Span', {}, '注销结算完成')
            ])
          }
        },
      },
      {
        title: "备注",
        key: "inspectRemark",
        minWidth: 200,
        tooltip: true,
      },
      {
        title: "操作",
        key: "action",
        fixed: "right",
        minWidth: 200,
        render: (h, params) => {
          let arr = []
          arr.push(h(
            "Button", {
            props: {
              type: "info",
              size: "small",
            },
            style: {
              marginRight: "5px",
            },
            on: {
              click: () => {
                this.koulvDetail(params.row)
              },
            },
          },
            "扣率信息"
          ))
          if (params.row.applyStatus === 'APPLY') {
            arr.push(h(
              "Button", {
              props: {
                type: "info",
                size: "small",
              },
              style: {
                marginRight: "5px",
              },
              on: {
                click: () => {
                  this.showList = {}
                  this.roleModalVisible = true
                  this.showList = params.row
                  this.audit = ""
                },
              },
            },
              "审核"
            ))
          }
          if (params.row.applyStatus === 'VIA_AUDITING') {
            arr.push(h(
              "Button", {
              props: {
                type: "info",
                size: "small",
              },
              style: {
                marginRight: "5px",
              },
              on: {
                click: () => {
                  this.dakuan(params)
                },
              },
            },
              "打款"
            ))
          }
          return h("div", arr)
        },
      }
      ],
      data: [],
      showList: {}, // 可操作选项
      roleModalVisible: false, // 审核模态框
      audit: "", // 审核备注
    }
  },
  components: {
    region
  },
  created () {
    this.getDataList()
  },
  methods: {
    getDataList () {
      PlantWithdrawalAdmin(this.searchForm).then((res) => {
        this.loading = false
        this.data = res.result.data.records
        this.total = res.result.data.total
        this.all = res.result.all
      })
    },
    // 跳转到扣率信息详情
    koulvDetail (row) {
      this.$router.push({
        name: "koulv-detail",
        query: {
          sn: row.sn
        }
      })
    },
    // 审核
    submitRole (res) {
      const params = {}
      params.applyId = this.showList.id
      params.result = res
      params.remark = this.audit
      if (res === false && params.remark === "") {
        this.$Message.error("审核备注不能为空")
        return
      }
      withdrawApply(params).then((res) => {
        this.loading = false
        if (res == true) {
          this.$Message.success("操作成功")
          this.roleModalVisible = false
          this.getDataList()
        }
      })
    },
    dakuan (params) {
      let that = this
      this.$Modal.confirm({
        title: '确定已打款吗？',
        onOk () {
          PlantWithdrawalDakuan(params.row.id).then((res) => {
            if (res.success) {
              this.$Message.success("确认打款成功", 3)
            } else {
              // this.$Message.error("确认打款失败", 3);
            }
            that.getDataList()
          })
        }
      })
    },
    // 选中的地址
    selectedRegionSearch (val) {
      this.searchForm.region = val[1].join(',')
      this.searchForm.regionId = val[0].join(',')
    },
    Search () {
      this.loading = true
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getDataList()
    },
    handleReset () {
      this.searchForm.pageNumber = 1 // 当前页数
      this.searchForm.pageSize = 10 // 页面大小
      this.searchForm.selectDate = ''
      this.searchForm.mobile = ''
      this.$refs.region.addr = []
      this.searchForm.partnerName = ''
      this.searchForm.applyStatus = ''
      this.getDataList()
    },
    // 分页 改变页码
    changePage (v) {
      this.searchForm.pageNumber = v
      this.getDataList()
    },
    // 分页 改变页数
    changePageSize (v) {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = v
      this.getDataList()
    },
  }
}
</script>

<style lang="scss" scoped>
.div-content {
  width: 100%;
  height: 100%;
  display: flex;

  .div-item {
    line-height: 35px;
    display: flex;
    float: left;
    margin-right: 36px;
    font-size: 16px;
    font-weight: 600;

    > .div-item-left {
    }

    > .div-item-right {
      flex: 1;
      word-break: break-all;
    }
  }
}
</style>
